<template>
    <div class="say">
        <div>
            <van-icon name="revoke" @click="back" />
        </div>
        <van-row>
            <van-col span="24">
                <van-image class="image_content" fit="cover" :src="imagbase64" />
            </van-col>
        </van-row>
        <van-row>
            <van-col span="20">
                <van-field class="message" v-model="message" rows="1" autosize label="说两句" type="textarea" placeholder="说两句"
                    @input="inputArea()" />
            </van-col>
            <van-col span="4">
                <van-button class="sub" v-show="show" round type="info" @click="submit">发布</van-button>
            </van-col>
        </van-row>
    </div>
</template>

<script>
export default {
    name: 'Say',
    data() {
        return {
            message: '',
            imagbase64: '',
            show: false,
        }
    },
    created: function () {
        this.imagbase64 = this.$route.query.file.content
    },
    methods: {
        inputArea() {
            if (this.message.length > 0) {
                this.show = true
            } else {
                this.show = false
            }
        },
        back() {
            history.back();
        },
        onSubmit() {

        },
        submit() {
            const tel = window.localStorage.getItem('dazi_')
            const img = this.imagbase64.split('base64,')[1]

            const mes = {
                image: img,
                tel: tel,
                message: this.message
            }

            this.$axios.post('http://localhost:9090/dazi/content/say', mes)
                .then(res => {
                    this.message = ''
                    this.$router.push("/me")
                })
        },
    }
}


</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.van-icon {
    margin: 10px 10px;
}

.image_content {
    width: 100%;
}

.message {
    margin: 10px 0;
}

.sub,
.say {
    margin: 10px 0;
}
</style>
